<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        input, button {
            display: block;
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
        }
        #message {
            margin-top: 20px;
            padding: 10px;
            background-color: #f0f0f0;
        }
        #logoutButton {
            display: none;
        }
    </style>
</head>
<body>
<h1>User Management</h1>

<div id="registerForm">
    <h2>Register</h2>
    <input type="text" id="regPhone" placeholder="Phone number">
    <input type="password" id="regPassword" placeholder="Password">
    <input type="text" id="regUsername" placeholder="Username (optional)">
    <button onclick="register()">Register</button>
</div>

<div id="loginForm">
    <h2>Login</h2>
    <input type="text" id="loginPhone" placeholder="Phone number">
    <input type="password" id="loginPassword" placeholder="Password">
    <button onclick="login()">Login</button>
</div>

<button id="logoutButton" onclick="logout()">Logout</button>

<div id="message"></div>

<script>
    const API_URL = 'http://localhost:8080'; // 请根据实际情况修改

    async function register() {
        const phone = document.getElementById('regPhone').value;
        const password = document.getElementById('regPassword').value;
        const username = document.getElementById('regUsername').value;

        try {
            const response = await fetch(`${API_URL}/user/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    mobilePhoneNum: phone,
                    password: password,
                    userName: username,
                }),
            });

            const data = await response.json();
            if (response.ok) {
                showMessage(`Registration successful. User ID: ${data.userId}`);
            } else {
                showMessage(`Registration failed. Error: ${data.error_code}`);
            }
        } catch (error) {
            showMessage('An error occurred during registration.');
        }
    }

    async function login() {
        const phone = document.getElementById('loginPhone').value;
        const password = document.getElementById('loginPassword').value;

        try {
            const response = await fetch(`${API_URL}/user/login`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    mobilePhoneNum: phone,
                    password: password,
                }),
            });

            const data = await response.json();
            if (response.ok) {
                showMessage('Login successful');
                document.getElementById('logoutButton').style.display = 'block';
                localStorage.setItem('token', data.result.token);
                localStorage.setItem('phone', phone);
            } else {
                showMessage(`Login failed. Error: ${data.error_code}`);
            }
        } catch (error) {
            showMessage('An error occurred during login.');
        }
    }

    async function logout() {
        const token = localStorage.getItem('token');
        const phone = localStorage.getItem('phone');
        if (!token || !phone) {
            showMessage('No user is currently logged in.');
            return;
        }

        try {
            const response = await fetch(`${API_URL}/user/logout`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    mobilePhoneNum: phone,
                    token: token,
                }),
            });

            const data = await response.json();
            if (data.error_code === 0) {
                showMessage('Logout successful');
                document.getElementById('logoutButton').style.display = 'none';
                localStorage.removeItem('token');
                localStorage.removeItem('phone');
            } else {
                showMessage(`Logout failed. Error: ${data.error_code}`);
            }
        } catch (error) {
            showMessage('An error occurred during logout.');
        }
    }

    function showMessage(message) {
        document.getElementById('message').textContent = message;
    }
</script>
</body>
</html>